<template>
	<div style="position: relative">
		<bread-crumb class="bread-crumb-padding" :list="breadCrumb" :user="true"></bread-crumb>
		<Spin :withIcon="true" v-if="loading"></Spin>
		<div class="flx-row-bw-s frame-area">
			<div class="box-item-frame flx-col-c-s first">
				<div class="pub-m-b-10 flx-row-bw-c" style="width: 100%">
					<span class="c-black pub-font-24">
						{{ welcomes }}
					</span>

					<div class="grade" style="width: 110px; background: #72aa58" @click="applytoAgent"
						v-if="$store.state.user.isAgent == 0">
						申请成为代理商
					</div>
					<div class="grade" style="width: 100px; margin-left: 20px;background-color: #72aa58"
						v-if="$store.state.user.isAgent == 1" @click="goLoginSystem">
						代理商后台
					</div>
				</div>
				<div class="flx-row-s-c" style="margin-bottom: 20px; flex-wrap: wrap; width: 100%">
					<span class="c-r pub-font-24 pub-m-b-10 userName">{{
            $store.state.user.nickname
              ? $store.state.user.nickname
              : $store.state.user.username
              ? $store.state.user.username
              : $store.state.user.account
          }}</span>
					<div class="pub-m-b-10 flx-row-s-c">
						<div class="grade" style="margin: 0 15px" v-if="levelName">
							{{ levelName }}
						</div>
<!--						<span class="text-button">查看我的特权</span>-->
					</div>

					<div class="flx-row-s-c pub-m-b-10">
						<div class="icon-item checkAll" v-for="(item, index) in FirstBoxIconList" :key="index" :class="
                colorType == 0
                  ? item.class
                  : colorType == 1
                  ? item.class2
                  : colorType == 2
                  ? item.class3
                  : item.class4
              " @click="to"></div>
					</div>
				</div>
				<span class="f-14" style="color: #747474"><span
						style="margin-right: 30px">上次登录：{{ lastLoginTime }}</span>{{ lastLoginIp }}（{{ lastLoginAddr }}）</span>
			</div>
			<div class="box-item-frame sec">
				<div class="title-area flx-row-bw-c">
					<span class="f-16 f-w-600 c-d2">我的钱包</span>
					<div class="flx-row-s-c button-area">
						<router-link to="/user/recharge" class="user-strong-button button" style="">充值</router-link>
						<router-link to="/user/cashout" class="user-normal-button button"
							style="margin-left: 19px">提现</router-link>
						<!-- <div class="user-normal-button button">积分商城</div> -->
					</div>
				</div>
				<div class="flx-row-s-c">
					<div class="normal-list-item list-item-size1 flx-row-c-c wallet-item" :class="[
              { 'mg-r-20': index < myMoneyList.length - 1 },
              { 'cursor-pointer': index == 1 || index == 2 },
            ]" @click="goCapitaldetails(item)" v-for="(item, index) in myMoneyList" :key="index">
						<div class="flx-col-s-c">
							<span class="pub-font-28 c-r">{{ item.number }}</span>
							<span class="c-black">{{ item.name }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="flx-row-bw-s frame-area">
			<div class="box-item-frame thi">
				<div class="title-area flx-row-bw-c">
					<span class="f-16 f-w-600 c-d2">预订竞价</span>
					<span class="c-o f-14 checkAll" @click="goPage">查看全部 ></span>
				</div>
				<div class="flx-row-s-c">
					<div @click="goTopage(item)" class="list-item list-item-size1 flx-row-c-c" style="cursor: pointer"
						:class="{ 'mg-r-9': index < bookBidding.length - 1 }" v-for="(item, index) in bookBidding"
						:key="index">
						<div class="flx-col-c-c w-p-100">
							<span class="c-w pub-font-24">{{ item.number }}</span>
							<span class="c-w f-14">{{ item.name }}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="box-item-frame">
				<div class="title-area flx-row-bw-c">
					<span class="f-16 f-w-600 c-d2">我的收入</span>
					<span class="f-14 checkAll" style="color: #3daa4e" @click="goReceive">查看全部 ></span>
				</div>
				<div class="flx-row-s-c">
					<div class="normal-list-item list-item-size1 flx-row-c-c receive-item"
						:class="{ 'mg-r-20': index < myIncome.length - 1 }" v-for="(item, index) in myIncome"
						style="cursor: pointer" @click="goCapitaldetails(item)" :key="index">
						<div class="flx-col-s-c">
							<span class="pub-font-32" style="color: #3daa4e">{{
                item.number
              }}</span>
							<span class="c-black f-14">{{ item.name }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="big-box-item-frame">
			<div class="title-area flx-row-bw-c">
				<span class="f-16 f-w-600 c-black">我的域名</span>
				<!-- <span class="c-o f-14">查看全部 ></span> -->
			</div>
			<div class="flx-row-s-c" style="flex-wrap: wrap; padding: 0 10px">
				<router-link :to="item.path" class="list-item-size2 flx-row-s-c"
					:class="index != 3 && index != 7 ? 'pub-m-r-18' : ''" v-for="(item, index) in myDN" :key="index">
					<div class="big-icon" :style="{
              backgroundImage: `url(${require('_a/images/' +
                item.icon +
                '@2x.png')})`,
            }"></div>
					<div class="flx-row-bw-c w-p-100">
						<span class="c-black f-14">{{ item.name }}</span>
						<span class="c-o f-w-600 f-18">{{ item.number }}</span>
					</div>
					<div class="line-right"></div>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getAccountHomeInfo,
		getRushInfo,
		getagentLogin
	} from "@/api/user";
	import {
		getBottom
	} from "@/api/data";
	import {
		changelocation
	} from "@/utils/location";
	export default {
		name: "VipUserHome",
		data() {
			return {
				breadCrumb: [{
					name: "管理中心"
				}, {
					name: "控制台"
				}],
				loading: false,

				levelName: "",
				isAgent: "",
				levelId: "",
				lastLoginTime: "",
				lastLoginIp: "",
				lastLoginAddr: "",
				color: "",
				colorType: 0,
				FirstBoxIconList: [{
						class: "b-f-1",
						class2: "b-f-1-g",
						class3: "b-f-1-b",
						class4: "b-f-1-p",
					},
					{
						class: "b-f-2",
						class2: "b-f-2-g",
						class3: "b-f-2-b",
						class4: "b-f-2-p",
					},
					{
						class: "b-f-3",
						class2: "b-f-3-g",
						class3: "b-f-3-b",
						class4: "b-f-3-p",
					},
				],
				myMoneyList: [{
						name: "可用余额",
						number: "",
						icon: "b-s-1",
					},
					{
						name: "返现金额",
						number: "",
						icon: "b-s-2",
						path: "/user/capitaldetails?tab=4",
					},
					{
						name: "冻结余额",
						number: "",
						icon: "b-s-2",
						path: "/user/capitaldetails?tab=2",
					},
					/*{
						name: "积分",
						number: 0,
						icon: "b-s-3",
					},*/
				],
				myIncome: [{
						name: "竞价收入",
						number: "",
						icon: "b-t-1",
						path: "/user/capitaldetails?tab=4&subTab=600",
					},
					{
						name: "一口价收入",
						number: "",
						icon: "b-t-2",
						path: "/user/capitaldetails?tab=1&subTab=100",
					},
					{
						name: "代理收入",
						number: "",
						icon: "b-t-3",
						path: "/user/capitaldetails?tab=1&subTab=700",
					},
				],
				bookBidding: [{
						name: "等待抢注",
						number: "",
						path: "/user/mybookings",
						icon: "b-fo-1",
					},
					{
						name: "竞价中",
						number: "",
						path: "/user/mybiddings",
						icon: "b-fo-2",
					},
					{
						name: "待支付尾款",
						number: "",
						path: "/user/mywinnings?tab=1",
						icon: "b-fo-3",
					},
					{
						name: "等待交割",
						number: "",
						path: "/user/mywinnings?tab=2",
						icon: "b-fo-4",
					},
				],
				myDN: [{
						name: "域名总数",
						number: "",
						path: "/user/mydn",
						icon: "i2",
					},
					{
						name: "即将到期的域名",
						number: "",
						path: "/user/mydn?tab=3",
						icon: "b-b-2",
					},
					{
						name: "续费期域名",
						number: "",
						path: "/user/mydn?tab=4",
						icon: "b-b-3",
					},
					{
						name: "赎回期域名",
						number: "",
						path: "/user/mydn?tab=5",
						icon: "b-b-4",
					},
					{
						name: "正在转入",
						number: "",
						path: "/user/transferin/record?tab=1",
						icon: "b-b-5",
					},
					{
						name: "正在转出",
						number: "",
						path: "/user/transferout/record?tab=2",
						icon: "b-b-6",
					},
					{
						name: "等待接收的PUSH",
						number: "",
						path: "/user/dnPush/receive?tab=1",
						icon: "b-b-7",
					},
					{
						name: "对方待收的PUSH",
						number: "",
						path: "/user/dnPush/sent?tab=1",
						icon: "i1",
					},
					{
						name: "域名模板",
						number: "",
						path: "/user/template",
						icon: "b-b-9",
					},
				],
			};
		},
		created() {
			this.getAccountHomeInfo();
			this.getRushInfo();
			if (this.$storage.getColor()) {
				this.color = this.$storage.getColor();
				this.colorType = this.$storage.getColorType();
			} else {
				this.getBottom();
			}
		},
		computed: {
			welcomes() {
				const date = new Date();
				if (date.getHours() < 6) {
					return "凌晨好！";
				} else if (date.getHours() < 9) {
					return "早上好！";
				} else if (date.getHours() < 12) {
					return "上午好！";
				} else if (date.getHours() < 14) {
					return "中午好！";
				} else if (date.getHours() < 18) {
					return "下午好！";
				} else if (date.getHours() < 23) {
					return "晚上好！";
				}
				return "晚上好！";
			},
		},
		methods: {
			applytoAgent() {
				window.location.href = "/user/myapplication";
			},
			async goLoginSystem() {
				const list = {};
				const {
					code,
					data
				} = await getagentLogin(list);
				if (code === 200 && data) {
					window.open(changelocation("/agent/") + "?token=" + data);
				}
			},
			goPage() {
				let url = changelocation("/booking");
				window.open(url);
			},
			async getAccountHomeInfo() {
				this.loading = true;
				let res = await getAccountHomeInfo();
				if (res.code == 200) {
					this.levelName = res.data.levelName;
					this.levelId = res.data.levelId;
					this.lastLoginTime = res.data.lastLoginTime;
					this.lastLoginIp = res.data.lastLoginIp;
					this.lastLoginAddr = res.data.lastLoginAddr;
					// 我的钱包
					this.myMoneyList[0].number = res.data.balance;
					this.myMoneyList[1].number = res.data.rebate;
					this.myMoneyList[2].number = res.data.freeze;
					// this.myMoneyList[3].number = res.data.scores;
					// 我的收入th
					this.myIncome[0].number = res.data.biddingIncome;
					this.myIncome[1].number = res.data.fixedPriceIncome;
					this.myIncome[2].number = res.data.agentIncome;
					// 我的域名
					this.myDN[0].number = res.data.domainCount;
					this.myDN[1].number = res.data.expiringCount;
					this.myDN[2].number = res.data.expiredCount;
					this.myDN[3].number = res.data.redeemCount;
					this.myDN[4].number = res.data.transferIntoCount;
					this.myDN[5].number = res.data.transferOutCount;
					this.myDN[6].number = res.data.waitPushCount;
					this.myDN[7].number = res.data.sendPushCount;
					this.myDN[8].number = res.data.domainTemplateCount;
				}
				this.loading = false;
			},
			async getRushInfo() {
				let res = await getRushInfo();
				// 预订竞价
				this.bookBidding[0].number = res.data.bookingCount;
				this.bookBidding[1].number = res.data.biddingCount;
				this.bookBidding[2].number = res.data.finalPayment;
				this.bookBidding[3].number = res.data.deliveringCount;
			},
			to() {
				this.$router.push("/user/security");
			},
			async getBottom() {
				const {
					code,
					data
				} = await getBottom();
				if (code === 200) {
					this.color = data.color;
					this.colorType = data.colorType;
				}
			},
			goTopage(item) {
				// window.location.href= it
				this.$router.push(item.path);
			},
			goCapitaldetails(item) {
				if (item.path) {
					this.$router.push(item.path);
				}
			},
			goReceive() {
				this.$router.push("/user/capitaldetails?tab=-1");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box-item-frame {
		height: 236px;
		background-color: $w;
		padding: 0 39px;
		margin-bottom: 20px;
		font-weight: 400;
	}

	.title-area {
		padding: 30px 21px 40px;
	}

	.big-box-item-frame {
		background-color: $w;
		padding: 0 20px 50px;
	}

	.normal-list-item {
		@include size(163px, 93px);
		border-radius: 15px;
	}

	.list-item {
		background-color: $mainColor;
		transition: background-color 0.3s, box-shadow 0.3s;
		border-radius: 15px;

		&:hover {
			transform: scale(1.03);
			box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
		}
	}

	.list-item-size1 {
		@include size(100%, 93px);
		flex-shrink: 1;

		padding: 0 10px;

		&.mg-r-20 {
			margin-right: 20px;
		}

		&.mg-r-9 {
			margin-right: 9px;
		}
	}

	.wallet-item {
		border: 1px dashed $mainColor;
	}

	.receive-item {
		border: 1px dashed #3daa4e;
	}

	.list-item-size2 {
		height: 35px;
		width: 23.3%;
		margin-bottom: 30px;

		.line-right {
			width: 1px;
			height: 23px;
			background: #e4e6fa;
			margin-left: 30px;
		}
	}

	.small-icon {
		@include size(28px);

		border-radius: 50%;
		background-color: $mainColor;
		@include bg-setting(null, 18px 18px, center);

		flex-shrink: 0;
		margin-right: 7px;
	}

	.big-icon {
		@include size(42px);
		@include bg-setting(null, 35px 35px, center);
		flex-shrink: 0;
	}

	.first {
		.grade {
			@include size(71px, 23px);
			font-size: 12px;
			@include btn-s(null, 23px, 4px);
			@include h-c($mainColor, null, $w);

			flex-shrink: 0;
		}

		.text-button {
			color: $mainColor;
			font-size: 16px;
			cursor: pointer;
			font-weight: 600;
			flex-shrink: 0;
			margin-right: 20px;
		}

		.icon-item {
			@include size(36px, 36px);

			border-radius: 50%;
			border: 2px solid $mainColor;

			&:not(:last-child) {
				margin-right: 20px;
			}

			flex-shrink: 0;
		}

		.b-f-1 {
			@include bg-setting("b-f-1", 18px, center);
		}

		.b-f-2 {
			@include bg-setting("b-f-2", 15px, center);
		}

		.b-f-3 {
			@include bg-setting("b-f-3", 23px, center);
		}

		.b-f-1-g {
			@include bg-setting3("b-f-1-g", 15px 15px, center);
		}

		.b-f-2-g {
			@include bg-setting3("b-f-2-g", 15px 15px, center);
		}

		.b-f-3-g {
			@include bg-setting3("b-f-3-g", 16px 15px, center);
		}

		.b-f-1-b {
			@include bg-setting3("b-f-1-b", 15px 15px, center);
		}

		.b-f-2-b {
			@include bg-setting3("b-f-2-b", 15px 15px, center);
		}

		.b-f-3-b {
			@include bg-setting3("b-f-3-b", 16px 15px, center);
		}

		.b-f-1-p {
			@include bg-setting3("b-f-1-p", 15px 15px, center);
		}

		.b-f-2-p {
			@include bg-setting3("b-f-2-p", 15px 15px, center);
		}

		.b-f-3-p {
			@include bg-setting3("b-f-3-p", 16px 15px, center);
		}
	}

	.sec {
		.button-area {
			.user-normal-button {
				border: 1px solid #72aa58;
				@include h-c(#72aa58, rgba(#72aa58, 0.8), $w, $w);
			}

			.user-strong-button {
				@include h-c($mainColor, $color-main-8, $w, $w);
			}

			.button {
				@include size(71px, 23px);
				@include btn-s(null, 23px, 4px);
				font-size: 12px;
			}
		}
	}

	@media screen and (min-width: 1450px) {
		.frame-area {
			flex-wrap: nowrap;
		}

		.box-item-frame {
			width: 100%;
		}

		.first,
		.thi {
			margin-right: 20px;
		}
	}

	@media screen and (min-width: 0) and (max-width: 1450px) {
		.frame-area {
			flex-wrap: wrap;
		}

		.box-item-frame {
			width: 100%;
		}

		.first,
		.thi {
			margin-right: 0;
		}
	}

	.checkAll:hover {
		cursor: pointer;
	}

	.c-d2 {
		color: $textColor;
	}

	.c-o {
		color: $mainColor;
	}

	.c-g {
		color: $c-g;
	}

	.c-gr {
		color: $mainColor;
	}

	.userName {
		display: inline-block;
		max-width: 300px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
